<template>
    <div class="shop-list">
        <div class="shop-title clearFix" v-if="show">
            <em></em>
            <h1>{{ title }}</h1>
            <em></em>
        </div>
        <div class="product-list">
            <van-list v-model="loading" :finished="finished" finished-text="没有更多数据了" @load="onLoad" :immediate-check="true">
                <div class="product-list-center">
                    <ul class="clearFix">
                        <li v-for="item in list" :key="item.id">
                            <div class="shop-pic">
                                <a href="javascript:;">
                                    <img :src="item.imgUrl" :alt="item.imgTitle" :title="item.imgTitle" />
                                </a>
                            </div>
                            <div class="shop-desc">
                                <div class="shop-name">
                                    <h2>{{ item.title }}</h2>
                                </div>
                                <div class="shop-info clearFix">
                                    <span class="fl">￥{{ item.price }}</span>
                                    <a class="fr" href="javascript:;">点击加入购物车</a>
                                </div>
                            </div>
                        </li>
                    </ul>
                </div>
            </van-list>
        </div>
    </div>
</template>

<script>
    export default {
        name: 'shopList',
        // 接收父级传递过来的数据
        props: {
            'title': {
                type: String,
                required: true
            },
            'show': {
                type: Boolean,
                default: false
            }
            // 精品推荐
            // 'boutiqueList': {
            //     type: Array,
            //     required: true,
            //     default () {
            //         return [];
            //     }
            // }
        },
        watch: {

        },
        created() {

        },
        mounted() {

        },
        data() {
            return {
                // 我的列表数据
                list: [],
                // 数据是否在加载
                loading: false,
                // 数据是否加载完成
                finished: false,
                // 当前页码
                pageNum: 1,
                // 每页多少条
                pageSize: 2
            };
        },
        methods: {
            async onLoad() {
                try {
                    // 拼接要提交的参数
                    let params = {
                        pageNum: this.pageNum,
                        pageSize: this.pageSize
                    };

                    let res = await this.$axios.shop.getShopList(params);

                    const { responseData } = res.data;

                    // 数据加载完毕
                    if (responseData.length == 0) {
                        this.finished = true;
                        this.loading = false;
                        return false;
                    } else {
                        setTimeout(() => {
                            this.list = this.list.concat(responseData);
                            this.pageNum += 1;
                            this.loading = false;
                        }, 1000);
                    }
                } catch (err) {
                    console.log('err', err);
                    this.loading = false;
                }
            }
        },
        computed: {

        },
        components: {

        }
    };

</script>

<style lang="scss" scoped>
    .shop-list {
        width: 100%;
        background-color: #f4f4f4;

        .shop-title {
            display: flex;
            display: -webkit-flex;
            justify-content: center;
            -webkit-justify-content: center;
            flex-direction: row;
            -webkit-flex-direction: row;
            width: 100%;
            height: 70px;
            background-color: #fff;
            padding-top: 23px;

            em {
                float: left;
                width: 26px;
                height: 4px;
                background-color: #333;
                margin-top: 12px;
            }

            h1 {
                float: left;
                font-weight: bold;
                font-size: 24px;
                color: #333;
                margin: 0 20px;
            }
        }

        .product-list {
            width: 100%;
            background-color: #fff;
            margin-top: 5px;

            .product-list-center {
                padding: 0 30px;
                box-sizing: border-box;
                -webkit-box-sizing: border-box;

                ul {
                    padding: 30px 0 0 0;
                    box-sizing: border-box;
                    -webkit-box-sizing: border-box;

                    li {
                        float: left;
                        margin-bottom: 40px;
                        position: relative;
                        z-index: 2;

                        .shop-pic {
                            a {
                                display: block;
                                width: 327px;

                                img {
                                    width: 100%;
                                    height: 327px;
                                }
                            }
                        }

                        .shop-desc {
                            width: 327px;
                            padding: 0 14px;
                            box-sizing: border-box;
                            -webkit-box-sizing: border-box;

                            .shop-name {
                                margin-top: 18px;

                                h2 {
                                    font-weight: bold;
                                    font-size: 25px;
                                    line-height: 30px;
                                    color: #666;
                                }
                            }

                            .shop-info {
                                margin-top: 20px;

                                span {
                                    font-weight: bold;
                                    font-size: 24px;
                                    line-height: 30px;
                                    color: #e00000;
                                }

                                a {
                                    width: 32px;
                                    height: 32px;
                                    background: url(/images/wf_ico.png) no-repeat -420px -16px;
                                    background-size: 834px 535px;
                                    text-indent: -999999em;
                                }
                            }
                        }

                        &:nth-of-type(2n) {
                            float: right;
                        }
                    }
                }
            }
        }
    }

</style>
